<template>
  <div style="padding: 5px">
    <div style="padding: 5px 0">
      <el-button type="primary" plain @click="addPart()" v-if="isYubaoCenter">新增部门</el-button>
    </div>
    <!-- 角色管理 -->
    <!-- default-expand-all -->
    <el-table :data="tableData" style="width: 100%; margin-bottom: 10px" row-key="id" border
      :tree-props="{ children: 'permissionList' }" stripe>
      <el-table-column prop="id" label="编号" sortable width="80" />
      <el-table-column prop="name" label="部门名称" width="80" />
      <template v-if="isYubaoCenter">
        <el-table-column prop="title" label="系统名称" />
        <el-table-column prop="ncDirectory" label="nc文件夹" width="80px" />
        <el-table-column prop="parentDirectory" label="警报单文件夹" width="80px" />
        <el-table-column prop="publicSeaAreaId" label="公共海域编号">
          <template #default="{ row }">
            <template v-for="(item, idx) in row?.publicSeaAreaId" :key="item">
              <el-tag type="" size="normal" style="margin-bottom: 5px;">
                {{ pubAreas.find((pubArea) => pubArea.id == item)?.name }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="pntIds" label="潮位站">
          <template #default="{ row }">
            <template v-for="(item, idx) in row?.pntIds" :key="item">
              <el-tag type="" size="normal" style="margin-bottom: 5px;">
                {{ pnts.find((pnt) => pnt.pntId == item)?.name }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="subTationId" label="子站编号集合" width="180px">
          <template #default="{ row }">
            <template v-for="(item, idx) in row?.subTationId" :key="item">
              <el-tag type="" size="normal" style="margin-bottom: 5px;">
                {{ subAreas.find((subArea) => subArea.id == item)?.name }}
              </el-tag>
            </template>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="启用状态" sortable width="80">
          <template #default="{ row }">
            <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" v-model="row.status"
              :active-value="1" :inactive-value="0" size="" active-text="正常" inactive-text="禁用" inline-prompt
              @change="handleStatus(row)" />
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="tideValue" label="潮位警戒值" width="80px" />
      <el-table-column prop="waveValue" label="海浪警戒值" width="80px" />
      <el-table-column prop="tideBaseLevel" label="月高低潮基准面" width="100px" />
      <el-table-column prop="rasgridBaseLevel" label="逐时潮位基准面" width="90px" />

      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="editRowFn(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogFormVisible" title="新增部门" width="500">
    <el-form :model="form">
      <el-form-item label="部门名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="系统名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="警报单文件夹名称" :label-width="formLabelWidth">
        <el-select v-model="form.parentDirectory" placeholder="请选择警报单文件夹名称">
          <el-option v-for="item in WarningDirectorNames" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="nc文件夹名称" :label-width="formLabelWidth">
        <el-select v-model="form.ncDirectory" placeholder="请选择nc文件夹名称">
          <el-option v-for="item in NCDirectorNames" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="公共海域编号" :label-width="formLabelWidth">
        <el-select v-model="form.publicSeaAreaId" multiple placeholder="请选择公共海域编号">
          <el-option v-for="item in pubAreas" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="潮位站" :label-width="formLabelWidth">
        <el-select v-model="form.pntIds" multiple placeholder="请选择潮位站">
          <el-option v-for="item in pnts" :label="item.name" :value="item.pntId" />
        </el-select>
      </el-form-item>
      <el-form-item label="子站编号集合" :label-width="formLabelWidth">
        <el-select v-model="form.subTationId" multiple placeholder="请选择子站编号集合">
          <el-option v-for="item in subAreas" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="潮位警戒值(cm)" :label-width="formLabelWidth">
        <el-input v-model="form.tideValue" autocomplete="off" />
      </el-form-item>
      <el-form-item label="海浪警戒值(m)" :label-width="formLabelWidth">
        <el-input v-model="form.waveValue" autocomplete="off" />
      </el-form-item>

      <!-- 月高低潮基准面 -->
      <el-form-item label="月高低潮基准面" :label-width="formLabelWidth">
        <el-input v-model="form.tideBaseLevel" autocomplete="off" />
      </el-form-item>
      <el-form-item label="逐时潮位基准面" :label-width="formLabelWidth">
        <el-input v-model="form.rasgridBaseLevel" autocomplete="off" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSub">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editdialogFormVisible" title="编辑部门信息" width="600">
    <el-form :model="editform">
      <template v-if="isYubaoCenter">

        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="editform.name" autocomplete="off" />
        </el-form-item>

        <el-form-item label="系统名称" :label-width="formLabelWidth">
          <el-input v-model="editform.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="警报单文件夹名称" :label-width="formLabelWidth">
          <!-- <el-input v-model="editform.parentDirectory" autocomplete="off" /> -->
          <el-select v-model="editform.parentDirectory" placeholder="请选择警报单文件夹名称">
            <el-option v-for="item in WarningDirectorNames" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="nc文件夹名称" :label-width="formLabelWidth">
          <!-- <el-input v-model="editform.ncDirectory" autocomplete="off" /> -->
          <el-select v-model="editform.ncDirectory" placeholder="请选择nc文件夹名称">
            <el-option v-for="item in NCDirectorNames" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="公共海域编号" :label-width="formLabelWidth">
          <!-- <el-input v-model="editform.publicSeaAreaId" autocomplete="off" /> -->
          <el-select v-model="editform.publicSeaAreaId" multiple placeholder="请选择公共海域编号">
            <el-option v-for="item in pubAreas" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="潮位站" :label-width="formLabelWidth">
          <!-- <el-input v-model="editform.pntIds" autocomplete="off" /> -->
          <el-select v-model="editform.pntIds" multiple placeholder="请选择潮位站">
            <el-option v-for="item in pnts" :label="item.name" :value="item.pntId" :key="item.pntId" />
          </el-select>
        </el-form-item>
        <el-form-item label="子站编号集合" :label-width="formLabelWidth">
          <!-- <el-input v-model="editform.subTationId" autocomplete="off" /> -->
          <el-select v-model="editform.subTationId" multiple placeholder="请选择子站编号集合">
            <el-option v-for="item in subAreas" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="潮位警戒值(cm)" :label-width="formLabelWidth">
        <el-input v-model="editform.tideValue" autocomplete="off" />
      </el-form-item>
      <el-form-item label="海浪警戒值(m)" :label-width="formLabelWidth">
        <el-input v-model="editform.waveValue" autocomplete="off" />
      </el-form-item>

      <!-- 月高低潮基准面 -->
      <el-form-item label="月高低潮基准面" :label-width="formLabelWidth">
        <el-input v-model="editform.tideBaseLevel" autocomplete="off" />
      </el-form-item>
      <el-form-item label="逐时潮位基准面" :label-width="formLabelWidth">
        <el-input v-model="editform.rasgridBaseLevel" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { getAllRole, getUserDepartment, addDepartment, getAllDepartment, editDepartment, getWarningDirectorName, getNCDirectorName, searchAllPnt, removeDepartment, selectPubArea, selectSubArea } from "../../network/net.js";
import { ElMessage } from 'element-plus';
import { isYubaoCenter } from "../../stores/chun.js"

let token = sessionStorage.getItem("token");

onMounted(() => {
  initAllDepartment();
  initPnts();
  initPubAreas();
  initSubAreas();
  getWarningDirectorName(token).then((res) => {
    if (res?.data?.code == "200") {
      WarningDirectorNames.value = res?.data?.data;
    }
  });
  getNCDirectorName(token).then((res) => {
    if (res?.data?.code == "200") {
      NCDirectorNames.value = res?.data?.data;
    }
  });
});

const WarningDirectorNames = ref([]);
const NCDirectorNames = ref([]);
const tableData = ref([]);
let uid = localStorage.getItem("loginId");
let uobj = { id: uid };

const handleStatus = (item) => {
  Object.keys(item).forEach((key) => {
    editform[key] = item[key];
  });
  handleEdit()
}

const pnts = ref([]);
const pnt = ref("");
const initPnts = () => {
  searchAllPnt(token).then((res) => {
    pnts.value = res.data.data
    pnt.value = res.data.data[0].pntId

  });
}

// selectPubArea
const pubAreas = ref([]);
const pubArea = ref("");
const initPubAreas = () => {
  selectPubArea(token).then((res) => {
    pubAreas.value = res.data.data
    pubArea.value = res.data.data[0].id
  });
}

// selectSubArea
const subAreas = ref([]);
const subArea = ref("");
const initSubAreas = () => {
  selectSubArea(token).then((res) => {
    subAreas.value = res.data.data
    subArea.value = res.data.data[0].id
  });
}

const handleEdit = () => {
  // console.log(editform);
  
  editform.pntIds = editform.pntIds.join(",");
  editform.subTationId = editform.subTationId.join(",");
  editform.publicSeaAreaId = editform.publicSeaAreaId.join(",");
  editDepartment(token, editform).then((res) => {
    if (res?.data?.code == "200") {
      ElMessage.success("编辑成功");
      editdialogFormVisible.value = false;
      initAllDepartment();
    } else {
      ElMessage.error("编辑失败");
    }
  })
}

const deleteRow = (index) => {
  let id = tableData.value[index].id;
  removeDepartment(token, { id }).then((res) => {
    if (res?.data?.code == "200") {
      ElMessage.success("删除成功");
      initAllDepartment();
    } else {
      ElMessage.error("删除失败");
    }
  })
}

const initAllDepartment = () => {
  getAllDepartment(token).then((res) => {
    if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
      let arr = res?.data?.data?.map((item) => {
        item.pntIds = item?.pntIds?.split(",").map((item) => {
          return parseInt(item);
        });
        item.subTationId = item?.subTationId?.split(",").map((item) => {
          return parseInt(item);
        });

        item.publicSeaAreaId = (item?.publicSeaAreaId + "")?.split(",").map((item) => {
          return parseInt(item);
        });

        return item;
      });


      tableData.value = arr.filter((item) => {
        return item.name != '预报中心';
      });

      console.log(tableData.value);



    } else {
      tableData.value = []
    }
  });
};

const editform = reactive({
  name: '',
  title: '',
  view: '',
  parentDirectory: '',
  publicSeaAreaId: '',
  subTationId: '',
  ncDirectory: '',
  status: 1,
  pntIds: [],
  tideValue: '',
  waveValue: ''
});
const form = reactive({
  name: '',
  title: '',
  view: '',
  parentDirectory: '',
  publicSeaAreaId: '',
  subTationId: '',
  ncDirectory: '',
  status: 1,
  pntIds: [],
  tideValue: '',
  waveValue: ''
});

const handleSub = () => {
  form.pntIds = form.pntIds.join(",");
  form.subTationId = form.subTationId.join(",");
  form.publicSeaAreaId = form.publicSeaAreaId.join(",");
  addDepartment(token, form).then((res) => {
    if (res?.data?.code == "200") {
      ElMessage.success("新增成功");
      dialogFormVisible.value = false;
      initAllDepartment();
    } else {
      ElMessage.error("新增失败");
    }
  })
}
const dialogFormVisible = ref(false);
const editdialogFormVisible = ref(false);
const formLabelWidth = "140px";
const addPart = () => {
  dialogFormVisible.value = true;
};
const editRowFn = (row) => {
  editdialogFormVisible.value = true;
  // editform = row;
  // 复制源对象的属性到响应式对象
  Object.keys(row).forEach((key) => {
    editform[key] = row[key];
  });
};
</script>
<style lang="less" scoped></style>
